<template>
  <v-navigation-drawer
    :right="true"
    v-model="show"
    width="300"
    absolute
  >
    <v-form>
      <v-expansion-panels>
        <v-expansion-panel>
          <v-expansion-panel-header>Screen</v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-switch
              v-model="form.trunon"
              label="Turn screen on"
              @change="truneonChange"
            />
            <v-progress-linear
              v-model="time"
            />
            <v-switch
              v-model="form.screenon"
              label="Keep screen on"
              @change="screenonChange"
            />
            <v-radio-group label="Brightness adjustment mode" v-model="form.brightModel">
              <v-radio label="Manual" value="manual" />
              <v-radio label="Automatic" value="auto" />
            </v-radio-group>
            <v-slider
              v-model="form.bright"
              min="1"
              max="255"
              label="Nrightness"
            ></v-slider>
          </v-expansion-panel-content>
        </v-expansion-panel>
        <v-expansion-panel>
          <v-expansion-panel-header>Sensor</v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-switch
              v-model="form.onBodyStatus"
              label="On-body status"
            />
            <v-text-field
              v-model="form.Barometer"
              type="number"
              label="Barometer(Pa)"
            />
            <v-slider
              v-model="form.heart"
              min="1"
              max="255"
              label="Heart rate"
            />
            <v-slider
              v-model="form.step"
              min="1"
              max="255"
              label="Step count"
            />
            <v-subheader class="no-left-padding">Geographic location</v-subheader>
            <v-text-field
              v-model="form.longitude"
              label="longitude"
            />
            <v-text-field
              v-model="form.latitude"
              label="latitude"
            />
          </v-expansion-panel-content>
        </v-expansion-panel>
        <v-expansion-panel>
          <v-expansion-panel-header>Battery</v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-radio-group label="Charging status" v-model="form.chargStatus">
              <v-radio label="Not charging" value="no" />
              <v-radio label="charging" value="charging" />
              <v-radio label="Wireless charging" value="wireless" />
            </v-radio-group>
            <v-slider
              v-model="form.batteryLevel"
              min="0"
              max="1"
              step="0.1"
              label="Battery level"
            >
              <template v-slot:append>
                <v-text-field
                  v-model="form.batteryLevel"
                  class="mt-0 pt-0"
                  hide-details
                  single-line
                  type="number"
                  style="width: 40px"
                />
              </template>
            </v-slider>
          </v-expansion-panel-content>
        </v-expansion-panel>
        <v-expansion-panel>
          <v-expansion-panel-header>Sound</v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-slider
              v-model="form.volume"
              min="0"
              max="1"
              step="0.1"
              label="Volume"
            >
              <template v-slot:append>
                <v-text-field
                  v-model="form.volume"
                  class="mt-0 pt-0"
                  hide-details
                  single-line
                  type="number"
                  style="width: 40px"
                ></v-text-field>
              </template>
            </v-slider>
          </v-expansion-panel-content>
        </v-expansion-panel>
        <v-expansion-panel>
          <v-expansion-panel-header>Device Setting</v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-select
              :items="languageList"
              v-model="form.lang"
              label="Standard"
            ></v-select>
          </v-expansion-panel-content>
        </v-expansion-panel>
        <v-expansion-panel>
          <v-expansion-panel-header>Debugging</v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-switch
              v-model="form.debug"
              label="Screen coordinate system"
            />
          </v-expansion-panel-content>
        </v-expansion-panel>
        <v-expansion-panel>
          <v-expansion-panel-header>Distributed capability</v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-subheader class="no-left-padding">Distributed communications</v-subheader>
            <v-text-field
              v-model="form.DeviceID"
              label="Device ID"
            />
            <v-text-field
              v-model="form.BundleName"
              label="Bundle name"
            />
            <v-text-field
              v-model="form.AbilityName"
              label="Ability name"
            />
            <v-textarea
              v-model="form.message"
              label="Message"
              :auto-grow="true"
              rows="2"
            />
            <v-btn small class="float-lg-right" color="primary">Send</v-btn>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-form>
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'Drawer',
  components: {},
  props: ['show'],
  data () {
    return {
      time: 100,
      languageList: ['zh-CN', 'en-US'],
      form: {
        trunon: true,
        screenon: true,
        brightModel: 'manual',
        bright: 100,
        onBodyStatus: false,
        Barometer: 100,
        heart: 100,
        step: 10000,
        longitude: 116.39647,
        latitude: 39.914417,
        chargStatus: 'no',
        batteryLevel: 0.1,
        volume: 0.5,
        lang: 'zh-CN',
        debug: false,
        DeviceID: null,
        BundleName: null,
        AbilityName: null,
        message: null
      }
    }
  },
  methods: {
    truneonChange: function (v) {
      if (v && !this.form.screenon) {
        this.startTimer()
      }
    },
    startTimer: function () {
      this.time = 100
      // 亮屏倒计时
      this.timer = setInterval(() => {
        this.time -= 10
        console.log('xxxx', this.time)
        if (this.time <= 0) {
          this.form.trunon = false
          clearInterval(this.timer)
        }
      }, 1000)
    },
    screenonChange: function (v) {
      if (v) {
        clearInterval(this.timer)
        this.time = 1
      } else if (this.form.trunon) {
        this.startTimer()
      }
    }
  },
  watch: {
    form: {
      deep: true,
      handler: function (newVal, oldVal) {
        console.log('form', newVal)
        this.$emit('onChange', newVal)
      }
    }
  }
}
</script>
